<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta" /}

    <style type="text/css">
        body {
            color:#999;
            background:url('/assets/img/loginbg.png');
            background-size:cover;
        }
        a {
            color:#fff;
        }
        .login-panel{margin-top:150px;}
        .login-screen {
            max-width:400px;
            padding:0;
            margin:100px auto 0 auto;

        }
        .login-screen .well {
            border-radius: 3px;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            /*background: rgba(255,255,255, 0.2);*/
            background: #fff;
        }
        .login-screen .copyright {
            text-align: center;
        }
        @media(max-width:767px) {
            .login-screen {
                padding:0 20px;
            }
        }
        .profile-img-card {
            width: 100px;
            height: 100px;
            margin: 10px auto;
            display: block;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
        .profile-name-card {
            text-align: center;
        }

        #login-form {
            margin-top:20px;
        }
        #login-form .input-group {
            margin-bottom:15px;
        }
        .input-group-addon{
            padding: 3px;
        }
        .glyphicon-user1{
            width: 23px;
            height: 23px;
            display: block;
            background:url('/assets/img/user.png') no-repeat center;
            background-size: 100%;
        }
        .glyphicon-lock1{
            width: 23px;
            height: 23px;
            display: block;
            background:url('/assets/img/password.png') no-repeat center;
            background-size: 100%;
        }
        .glyphicon-option-horizontal1{
            width: 23px;
            height: 23px;
            display: block;
            background:url('/assets/img/yzm.png') no-repeat center;
            background-size: 100%;
        }
        .btn-success{
            background-color: #3C89FF;
            border-radius: 20px;
            width: 80%;
            margin: 0 auto;
        }
        .sendmsg{
            width: 30%;
            text-align: center;
            padding: 0;
            line-height: 30px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="login-wrapper">
        <div class="login-screen">
            <div class="well">
                <div class="login-form">
                    <img id="profile-img" class="profile-img-card" src="__CDN__/assets/img/avatar.png" />
                    <p id="profile-name" class="profile-name-card"></p>

                    <form action="" method="post" id="login-form">
                        <div id="errtips" class="hide"></div>
                        {:token()}
                        <div class="input-group">
                            <div class="input-group-addon">
                                        <span class="glyphicon glyphicon-user1" aria-hidden="true">
                                        <!--<img class="profile-img-card" src="__CDN__/assets/img/user.png" />-->
                                        </span>
                            </div>
                            <input type="text" class="form-control" id="pd-form-username" placeholder="请输入手机号" name="username" autocomplete="off" value="" data-rule="required"/>
                        </div>

                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock1" aria-hidden="true"></span></div>
                            <input type="text" class="form-control" id="pd-form-password" placeholder="请输入验证码" name="password" autocomplete="off" value="" data-rule="required"  style="width: 70%" />
                            <input type="button" class="form-control sendmsg" value="获取短信验证码" style="width: 30%" onclick="send()"/>
                        </div>

                        {if $config.fastadmin.login_captcha}
                        <!--<div class="input-group">-->
                        <!--<div class="input-group-addon"><span class="glyphicon glyphicon-option-horizontal1" aria-hidden="true"></span></div>-->
                        <!--<input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length(4)" />-->
                        <!--<span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">-->
                        <!--<img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100" height="30" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"/>-->
                        <!--</span>-->
                        <!--</div>-->
                        {/if}
                        <div class="form-group">
                            <label class="inline" for="keeplogin">
                                <input type="checkbox" name="keeplogin" id="keeplogin" value="1" />
                                {:__('Keep login')}
                            </label>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success btn-lg btn-block">{:__('Sign in')}</button>
                        </div>
                    </form>
                </div>
            </div>
            <!--&lt;!&ndash; FastAdmin是开源程序，建议在您的网站底部保留一个FastAdmin的链接 &ndash;&gt;-->
            <!--<p class="copyright"><a href="https://www.fastadmin.net">Powered By FastAdmin</a></p>-->
        </div>
    </div>
</div>
{include file="common/script" /}
<script>
    function send()
    {
        var flag = true;
        var phone = $('#pd-form-username').val();
        if(phone == ''){
            flag = false;
            Toastr.error('请输入手机号');
        }
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            flag = false;
            Toastr.error('手机号码格式有误，请重填');
        }
        if(flag){
            $(this).attr("disabled",true);
            let time = 60;
            setInterval(function () {
                flag = false;
                if(time == 0){
                    $(".sendmsg").removeAttr("disabled");
                    $(".sendmsg").val("获取短信验证码");
                    clearInterval(timer);
                    time = 60;
                    flag = true;
                }else {
                    console.log(time);
                    $(".sendmsg").val(time + " s 重新发送");
                    time=time-1;
                }
            },1000);
            $.ajax({
                url:'sms/send',
                data: {mobile:phone,event:'login'},
                type:'POST',
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    Toastr.error(res.msg);
                    // htmls ='<option value="0" selected>顶级</option>';
                    // if(res.data.level != 3){
                    //     Toastr.error('请选择三级行业');
                    // }else{
                    //     var list = res.data.groups;
                    //     if(list.length > 0){
                    //         htmls = '';
                    //         for(let i = 0; i<list.length;i++){
                    //             htmls+='<option value="'+list[i].id+'">'+list[i].name+'</option>';
                    //         }
                    //     }
                    // }
                    // $('#c-parent_id').html(htmls);
                }
            });
        }

    }
</script>
</body>
</html>